<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./public/css/support.css">
	<link rel="stylesheet" href="./public/css/common.css">
	<link rel="stylesheet" href="./public/css/aos.css">
	<link rel="stylesheet" href="./public/css/swiper-bundle.min.css">
	<link rel="stylesheet" href="./public/css/swiper-bundle.css">
</head>

<body>
	<div id="header"></div>

	<div id="right"></div>

	<div id="container">
		<div class="banner">
			<img class="image" src="https://img.tongmen.cdn.dgyunju.cn/images/topImages/serve.png" alt="">

		</div>
		<!-- 主容器 -->
		<div class="serve-container">
			<!-- 标题 -->
			<div class="section-title">
				<h2>培训中心</h2>
				<span>training Center</span>
				<div class="line"></div>
			</div>

			<!-- 选项卡 -->
			<div class="tab-container" id="tabContainer">
				<div class="tab-item active" data-index="0">产品介绍视频</div>
				<div class="tab-item" data-index="1">操作说明视频</div>
				<div class="tab-item" data-index="2">视频直播预约</div>
			</div>

			<!-- 视频列表 -->
			<div style="position: relative;">
				<div class="loading-overlay" id="loadingOverlay" style="display: none;">
					加载中...
				</div>

				<div data-aos="fade-left" class="video-grid" id="videoGrid">
					<!-- 视频卡片将通过JS动态生成 -->
				</div>

				<div class="empty-state" id="emptyState" style="display: none;">
					暂无相关的培训列表
				</div>
			</div>

			<!-- 分页 -->
			<div id="radio" class="l-page"></div>


			<!-- 申请培训区域 -->
			<div class="apply-section">
				<p data-aos="fade-left" class="apply-tip">
					In order to help you better understand the products you buy and make our products bring more help to your
					instruments, we can provide customized and systematic technical skills training according to your specific
					needs. If you have such needs, you can submit an application on the website.
				</p>
				<a data-aos="fade-left" href="./training.html" class="apply-button">Apply for training</a>
			</div>
			<!-- 申请售后 -->
			<div class="apply-after--pc">
				<div data-aos="fade-left" class="content-col">
					<div class="til" data-aos="fade-up">
						<h2>After sales application</h2>
					</div>

					<p data-aos="fade-left" class="description" data-aos="fade-up">
						If your instrument needs to be calibrated or repaired, you can submit an application form through the
						website. We will contact you as soon as possible and you can know the progress of after-sales service
						through customer service.
					</p>

					<p data-aos="fade-left" class="description" data-aos="fade-up">
						Tongmen Electronic Technology promises to respond quickly to your needs. As long as you contact us through
						the website, telephone, wechat and any other way, we will pay attention to every need of you.
					</p>

					<a data-aos="fade-left" href="./after.html" class="button" data-aos="fade-up" id="applyButton">
						Apply for after-sales service
					</a>
				</div>
				<div data-aos="fade-left" class="image-col">
					<img src="https://img.tongmen.cdn.dgyunju.cn/images/bg-apply-after.jpg" alt="申请售后" class="image"
						loading="lazy">
				</div>
			</div>
			<!-- 常见问题 (模拟) -->
			<div data-aos="fade-down" class="faq-page">
				<!-- 标题区域 -->
				<div class="faq-header">
					<h2 class="faq-main-title">常见问题</h2>
					<span class="faq-sub-title">frequently asked questions</span>
					<div class="line"></div>
				</div>

				<!-- 筛选区域 -->
				<div class="filter-area">
					<!-- 分类选择 -->
					<div class="filter-box">
						<select class="filter-select">
							<option value="-1">共性问题</option>
							<option value="1">产品问题</option>
							<option value="2">支付问题</option>
							<optgroup label="售后服务">
								<option value="3">全部服务</option>
								<option value="31">退换货</option>
								<option value="32">维修</option>
							</optgroup>
						</select>
					</div>

					<!-- 搜索框 -->
					<div class="filter-box">
						<div class="search-box">
							<i class="search-icon">🔍</i>
							<input type="text" placeholder="请输入您想了解的问题">
						</div>
					</div>

					<!-- 操作按钮 -->
					<div class="filter-box" style="min-width: auto;">
						<button class="action-btn primary-btn">搜索</button>
						<button class="action-btn danger-btn">重置</button>
					</div>
				</div>

				<!-- 问题列表 -->
				<div class="question-list">
					<!-- 静态示例问题 -->
					<div class="question-item active">
						<div class="question-title">Q: 示例问题1</div>
						<div class="question-content">这是示例问题1的答案内容</div>
					</div>
					<div class="question-item">
						<div class="question-title">Q: 示例问题2</div>
						<div class="question-content">这是示例问题2的答案内容</div>
					</div>
					<div class="question-item">
						<div class="question-title">Q: 示例问题2</div>
						<div class="question-content">这是示例问题2的答案内容</div>
					</div>
					<div class="question-item">
						<div class="question-title">Q: 示例问题2</div>
						<div class="question-content">这是示例问题2的答案内容</div>
					</div>
					<div class="question-item">
						<div class="question-title">Q: 示例问题2</div>
						<div class="question-content">这是示例问题2的答案内容</div>
					</div>
				</div>

				<!-- 空状态 -->
				<div class="empty-state">
					暂无相关的问题列表~
				</div>

				<!-- 分页 -->
				<div id="question" class="l-page"></div>
			</div>
		</div>
	</div>

	<div id="footer"></div>
	<script src="./public/js/jquery.min.js"></script>
	<script src="./public/js/pagination.min.js"></script>
	<script src="./public/js/common.js"></script>
	<script src="./public/js/aos.js"></script>

	<script src="./public/js/support.js"></script>
</body>

</html>